<template>
  
	<view>
		<view>
			<scroll-view id="scrollviewWeb" :style="height" 
			:refresher-enabled="refresher" 
			:refresher-triggered="triggered" 
			@refresherrefresh="refresh" 
			scroll-y="true" :scroll-top="scrollTop"
			  @scrolltolower="scrollLower"
			  @scrolltoupper="scrollUpper"
			  
			  >
				<view id="msglistviewWeb">
					
					<navigator  v-for="(item,index) in webList" class="content" :url="`/subpkg/blog-detail/blog-detail?id=${item.id}`">
							
							
							<view v-if="item.label1">
								<view style="display: flex;">
									<view style="width: 60%;">
										<view>
											<text class="title">{{item.title}}</text>
										</view>
										<view>
											<text class="detail line2">{{item.name}}</text>
										</view>
									</view>
									<view style="width: 40%;margin-left: 5rpx;">
										<image :src="item.label1"  :lazy-load="true"  style="width: 100%;height: 180rpx;"></image> 
									</view>
							    </view>
								   <view style="display: flex;">
									  <text class="author" >{{null==item.authorName?item.username:item.authorName}}</text>
									   <text class="author" style="margin-left: 15rpx;">阅读 {{item.browseQuantity}}</text>
								   </view>
							</view>
							<view v-else-if="item.imgList.length==1">
								<view style="display: flex;">
									<view style="width: 60%;">
										<view>
											<text class="title">{{item.title}}</text>
										</view>
										<view>
											<text class="detail line2">{{item.name}}</text>
										</view>
									</view>
									<view style="width: 40%;margin-left: 5rpx;">
											<image :src="img" :lazy-load="true" v-for="(img,index) in item.imgList"  style="width: 100%;height: 180rpx;"></image> 
									</view>
								</view>
								<view style="display: flex;">
									<text class="author" >{{null==item.authorName?item.username:item.authorName}}</text>
								    <text class="author" style="margin-left: 15rpx;">阅读 {{item.browseQuantity}}</text>
								</view>
							</view>
							<view v-else>
								<view>
									<text class="title">{{item.title}}</text>
								</view>
								<view>
									<text class="detail line2">{{item.name}}</text>
								</view>
								    <view >
										<image :src="img" :lazy-load="true" v-if="index<=2"  v-for="(img,index) in item.imgList"  style="width: 30%;height: 180rpx;margin-left: 10rpx;"></image> 
									</view>
								
								<view style="display: flex;">
									<text class="author" >{{null==item.authorName?item.username:item.authorName}}</text>
								    <text class="author" style="margin-left: 15rpx;">阅读 {{item.browseQuantity}} </text>
								</view>
							</view>
							<view class="line"></view>
					</navigator>
				</view>
				
			</scroll-view>
			
		</view>
	</view>
	
</template>

<script>
	export default {
		props:{
			searchText:{	//选择块级显示还是圆形显示
				type: String,
				default: 'block'
			},
			content:{
				type: String,
				default: ''
			}
		},
		mounted() {
			this.open();
		},
	
		onLoad() {
		},
		onShow() {
		},
		data() {
			return {
				page:1, // 第一页 
				allpage:3, // 总页数
				loading:true, // 加载状态
				scrollTop:0,
				height:'',
				showLoad:true,
				refresher:false,
				triggered:false,
				canQuery:true,
				webList:[]
			};
		},
		methods:{
			initHeight(){
				let that = this;
				uni.getSystemInfo({
					success: function (res) {
						that.height = 'height: '+res.windowHeight+'px;';
						console.log('that.height -----',that.height)
					}
				}); 
			},
			open(){
				this.showLoad=true;
				this.initHeight();
				this.webList = [];
				this.allpage = 0;
				this.page=1;
				this.getBlogList();
			},
			async getBlogList(){
				console.log('canQuery',this.canQuery);
				if(this.canQuery){
					
					this.canQuery = false;
					this.showLoad = false;
					const {data:res} =await uni.$http.post('/blog/page_blog_vo?rows=10&page='+this.page,{classify1:this.content});
				
					let length = res.data.records.length;
					for (var i = 0; i < length; i++) {
						this.webList.push(res.data.records[i]);
					}
					this.allpage = res.data.pages;
					this.page=res.data.pageNum+1;
					this.canQuery = true;
					console.log('--------res.data.records.length=',res.data.records.length)
					 this.$emit('calHeight',res.data.records.length);
				}
				
			},
			
			refresh(){
				this.webList = [];
				this.allpage = 0;
				this.page=1;
				this.getBlogList();
				var that = this;
					if(!this.triggered){
						this.triggered = true; //下拉加载，先让其变true再变false才能关闭
						//关闭加载状态 (转动的圈)，需要一点延时才能关闭
						setTimeout(e =>{
							that.triggered = false;
						},100)
					}
				
			},
			
			
			
			scrollLower(){
				console.log('--scrollLower----',121212)
				if(this.page<=this.allpage||this.allpage==0){
					this.getBlogList();
				}else{
					this.loading=false
				}
					
			},
			
			scrollUpper(){
				
			},

			
			
		}
	}
</script>

<style lang="less">
.loading{
	text-align: center;
}
.nomore{
	text-align: center;
}
.title{
	font-size: 30rpx;
	font-weight: bold;
}
.detail{
	color: #999;
}
.author{
	margin-top: 13rpx;
	font-size: 22rpx;
	color: #b4b4b4;
}
.content{
	padding-top: 5rpx;
	padding-left: 18rpx;
	padding-right: 18rpx;
	padding-bottom: 10rpx;
}
::-webkit-scrollbar {
  display: none;
  width: 0 !important;
  height: 0 !important;
  -webkit-appearance: none;
  background: transparent;
  color: transparent;
}
.line{
	margin-top: 20rpx;
	width: 100%;
	height: 1rpx;
	background: LightGrey;
}
//两行或多行显示
.line2{
	text-overflow: -o-ellipsis-lastline;
	overflow: hidden;				//溢出内容隐藏
	text-overflow: ellipsis;		//文本溢出部分用省略号表示
	display: -webkit-box;			//特别显示模式
	-webkit-line-clamp: 2;			//行数
	line-clamp: 2;					
	-webkit-box-orient: vertical;	//盒子中内容竖直排列
   font-size: 28rpx;

}
</style>
